<template>
  <div class="mapTemplet">
    <mapBack ref="child"></mapBack>
    <div class="list">
      <ul>
        <li v-for="(item, index) in list" :key="index" @click="mapClick(item)">
          <div class="flexStart">
            <div class="left" style="position:relative">
              <img width="120px" height="88px" :src="item.img_content" alt />
              <div style="position:absolute;left:0;top:0">
                <img :src="item.img_logo" alt width="44" height="42" />
              </div>
            </div>
            <div class="right flexDirectionCenter">
              <div class="flexStart1">
                <div class="flag" v-if="item.flag=='新建'">{{item.flag}}</div>
                <div class="flag2" v-if="item.flag=='局监管'">{{item.flag}}</div>
                <div class="flag3" v-if="item.flag=='局直管'">{{item.flag}}</div>
                <div class="title">{{item.title}}</div>
              </div>
              <div class="detail">{{item.detail}}</div>
              <div class="price">{{item.price}}</div>
            </div>
          </div>
          <div class="viewPro" @click.stop="projectDetails(item)">查看项目</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import mapBack from "./map/index";
// import img_content1 from "../../../assets/projectDetail.jpg";
import img_logo1 from "../../../assets/homeImg/jujianguan.png";
import jiangyin from "../../../assets/homeImg/jiangyin.jpg";
import img_logo2 from "../../../assets/homeImg/zaijian.png";
import longtan from "../../../assets/homeImg/longtan.jpg";
import img_logo3 from "../../../assets/homeImg/juzhiguan.png";
import xinyi from "../../../assets/homeImg/xinyi.jpg";
import nanbu from "../../../assets/projectDetail.jpg";
import changtai from "../../../assets/homeImg/changtai.jpg";
import chuzhou from "../../../assets/homeImg/chuzhou.jpg";
import wufengshan from "../../../assets/homeImg/wutaifeng.png";
export default {
  components: {
    mapBack
  },
  data() {
    return {
      list: [
        {
          lat: 34.424034,
          lng: 118.395956,
          showFlag: false,
          img_content: chuzhou,
          img_logo: img_logo3,
          flag: "新建",
          title: "京沪淮江段扩建工程",
          detail: "京沪高速公路淮安至江都段工程",
          price: "199.1亿元/152.7公里/3.5年"
        },
        {
          lat: 34.420341,
          lng: 118.40228,
          showFlag: false,
          img_content: nanbu,
          img_logo: img_logo3,
          flag: "新建",
          title: "南部通道",
          detail: "苏锡高速公路常州至无锡段工程",
          price: "159.1亿元/43.9公里/4年"
        },
        {
          lat: 34.415279,
          lng: 118.410904,
          showFlag: false,
          img_content: longtan,
          img_logo: img_logo3,
          flag: "新建",
          title: "龙潭长江大桥",
          detail: "龙潭过江通道工程",
          price: "62.54亿元/4.925公里/5年"
        },
        {
          lat: 34.411705,
          lng: 118.416438,
          showFlag: false,

          img_content: changtai,
          img_logo: img_logo3,
          flag: "新建",
          title: "常泰长江大桥",
          detail: "常泰过江通道",
          price: "158.61亿元/130.7公里/5.5年"
        },
        {
          lat: 34.294223,
          lng: 118.626282,
          showFlag: false,

          img_content: jiangyin,
          img_logo: img_logo3,
          flag: "新建",
          title: "江阴靖江长江隧道",
          detail: "江阴靖江长江隧道",
          price: "89.1亿元/5.6公里/3年"
        },
        {
          lat: 33.93653,
          lng: 118.944965,
          showFlag: false,
          img_content: wufengshan,
          img_logo: img_logo3,
          flag: "新建",
          title: "五峰山过江通道",
          detail: "五峰山过江通道公路接线工程",
          price: "93.58亿元/33.04公里/3年"
        }
      ]
    };
  },
  methods: {
    projectDetails(data) {
      this.$router.push({ path: "/projectDetails" ,
      query:{data:data}});
      sessionStorage.setItem("imgdata", JSON.stringify(data));
      // console.log(JSON.parse(sessionStorage.getItem("imgdata")));
    },
    mapClick(flag) {
      // this.$nextTick(() => {
      setTimeout(() => {
        this.$refs.child.isShow(flag);
      }, 10);
      // })
      // this.mapProps=flag
    }
  }
};
</script>

<style scoped>
.mapTemplet {
  width: 1200px;
  position: relative;
}
ul {
  margin: 0;
  padding-top: 26px;
  padding-left: 15px;
  overflow-y: scroll;
  width: 360px;
  height: 486px;
  background: #fff;

  overflow: auto;
}
ul::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  /**/
}
ul::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 4px;
}
ul::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
li {
  list-style: none;
  margin-bottom: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.left {
  width: 120px;
  height: 88px;
  margin-right: 14px;
}
.right {
  width: 182px;

  font-size: 14px;

  font-family: "Microsoft YaHei";
  font-weight: 400;
  color: #333333;
}
.flag,
.flag2,
.flag3 {
  text-align: center;
  width: 45px;
  height: 18px;
  background: #51b342;
  border-radius: 2px;
  font-size: 12px;
  margin-right: 9px;
  color: #fff;
}
.flag2 {
  background: #ff8a00;
}
.flag3 {
  background: #074dec;
}
.title {
  font-size: 16px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Microsoft YaHei";
  font-weight: bold;
}
.detail {
  /* margin-top: 11px; */
  font-size: 14px;
  color: #333;
  /* margin-bottom: 10px; */
}
.price {
  font-size: 13px;
  color: #999;
}
.list {
  /* padding-left: 0; */
  position: absolute;
  top: 40px;
  left: 25px;
  background: #fff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
}
.viewPro {
  width: 70px;
  height: 30px;
  border-radius: 1px;
  background: #2e85d6;
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  position: absolute;
  right: 3px;
  top: 0px;
  /* display: none; */
  transform: translate(400px, 0px);
  transition: transform 0.35s;
}
li {
  padding-bottom: 7px;
}
li:hover .viewPro {
  transform: translate(0px, 0px);
}
li:hover {
  background: #f5f5f5;
}
</style>
